{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .original {
        border: 1px solid #999;
        font-size: 10px !important;
        border-radius: 4px;
        line-height: 14px;
        width: 30px;
        color: #505050;
        text-align: center;
        margin-right: 5px;
        top: -2px;
        position: relative;
        padding: 0 1px;
    }
    .price {
        color: #e4393c;
        font-size: 16px;
    }
    .mui-bar-tab .mui-tab-item.mui-active {
        color: #929292;
    }
    .softhide{
        display: none!important;
    }
    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
    {% if controller.cart.data|length > 0 %}
    <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right btn-edit" data-hide="1">编辑</button>
    {%endif%}
</header>

{% if controller.cart.data|length > 0 %}

<div class="mui-content">
    <form class="form-post" action="/center/cart/createorder" method="post" >

        <ul class="mui-table-view">
            <li class="mui-table-view-divider">收货人信息</li>
            {%for item in addrlist %}
            <li class="mui-table-view-cell">
                <input type="hidden"  name="address" value="{{item.id}}" >
                <a class="mui-navigate-right" href="/center/address/selectaddr/?id={{item.id}}&goodslist={{goodsget|jsonToStr}}">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <h4 class="mui-ellipsis">{{item.accept_name}} <small>({{item.mobile}})</small></h4>
                        <h5>{{item.province}},{{item.city}},{{item.county}}</h5>
                        <p class="mui-h6 mui-ellipsis">{{item.addr}}</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        {%if item.is_default == 1%}<span class="mui-h5 original">默认</span>{%endif%}
                    </div>
                </div>
                </a>
            </li>
            {% else %}
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="/center/address/selectaddr/?id=0&goodslist={{goodsget|jsonToStr}}">
                    添加新地址
                </a>
            </li>
            {%endfor%}
            <li class="mui-table-view-divider">送货清单</li>
            {% for val in check_goods%}
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="{{val.pic}}">
                    <div class="mui-media-body">
                        <h4 class="mui-ellipsis">{{val.title}}</h4>
                        <p class="mui-ellipsis">{% if val.type%}
                        <small>{{val.type}}</small>
                        {%endif%}

                        </p>
                        <p class="mui-ellipsis"><span >单价: ¥{{val.unit_price|formatCurrency}}</span>  <span class="item-title label  size-14">数量: {{val.qty}}</span>
                            <span class="stock">{%if val.stock > 0%}<span class="original">有货</span> {%else%}<span class="original">无货</span>{%endif%}</span>
                            </p>
                        <p class="mui-ellipsis">
                            <span class="size-14 price" data-price ="{{val.price}}">小计: ¥<strong class="color-danger">{{val.price|formatCurrency}}</strong></span>
                        </p>
                    </div>
                </a>
            </li>
            {% endfor %}
            <li class="mui-table-view-divider">订单备注</li>
            <div class="mui-input-row" style="margin: 5px;">
                <textarea class="margin-bottom-0" id="textarea" rows="3" placeholder="限200字，请勿填写发票，配送方面的信息" name="user_remark"></textarea>
            </div>
            <li class="mui-table-view-divider">总计</li>
            <li class="mui-table-view-cell"><span class="text-danger">{{nums}}</span> 件商品，总商品金额 <span class="mui-badge mui-badge-danger">¥ {% if real_amount %}{{real_amount|formatCurrency}}{%else%}0.00{%endif%}</span></li>
            <li class="mui-table-view-cell">优惠 <span class="mui-badge mui-badge-success">- ¥0.00</span></li>
            <li class="mui-table-view-cell">运费 <span class="mui-badge mui-badge-purple">{%if real_freight%}{{real_freight|formatCurrency}}{%else%}0.00{%endif%}</span></li>
            <li class="mui-table-view-cell mui-badge-danger">应付总额 <span class="mui-badge mui-badge-warning size-14">¥{{order_amount|formatCurrency}}</span></li>
        </ul>
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <input type="hidden" value="{{check_goods|jsonToStr}}" name="goodslist">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="addorder">提交订单</button>
        </div>
    </form>
</div>
{% else%}
11111
{%endif%}
{% endblock%}

{% block script %}
<script>
    var falg = false;
$("#addorder").on("tap",function () {
    if(falg){
        return false;
    }
    var that = this;
    var form =$(".form-post")
   var query = form.serialize();
    var target = form.get(0).action;
    $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
    falg = true;

    mui.post(target,query,function(data){
        if (data.errno==0) {
            if (data.data.url) {
                mui.toast(data.data.name + ' 即将跳转~');
            }else{
                mui.toast(data.data.name);
            }
            setTimeout(function(){
                $(that).removeClass('disabled').prop('disabled',false);
                falg=false;
                if (data.data.url) {
                    mui.openWindow({url: data.data.url})
                }else{
                    location.reload();
                }
            },1500);
        }else{
            if(data.errno==1001){
                $.each(data.errmsg,function(i,n){
                    mui.toast(n);
                })
            }else {
                mui.toast(data.errmsg);
            }

            setTimeout(function(){
                $(that).removeClass('disabled').prop('disabled',false);
                falg=false;
                if (data.data) {
                    mui.openWindow({url: data.data})
                }
            },1500);
        }
    },'json');
    return;
})
</script>
{% endblock %}
